<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>经销商管理</title>
    <link rel="stylesheet" href="/static/lib/layui-v2.5.6/layui-v2.5.6/layui/css/layui.css">
    <style>
        .layui-table-cell{
            height:36px;
            line-height: 36px;
        }
        .layui-col-xs1{
            height: 66px;
            line-height: 66px;
            margin: 5px 5px 0 0;
            text-align: center;
            font-size: 20px;
            cursor: pointer;
        }
        .info{
            font-size: 14px;
            color: rgb(110, 108, 108);
            line-height: 36px;
        }
        .layui-icon-search{
            font-size: 30px;
            color: #009688;
            cursor: pointer;
            margin-left: 40px;
        }
        .layui-icon{
            cursor: pointer;
        }
        
    </style>
</head>
<body>
    <table id="demo" lay-filter="test"></table>


<!-- 详细页面和弹出层 -->
    <div id="userDetails" style="display: none;">
        <div class="layui-form-item">
            <label class="layui-form-label">用户ID</label>
            <div class="layui-input-block userId_info1 info"></div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">用户账号</label>
            <div class="layui-input-block userName_info1 info"></div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">用户名</label>
            <div class="layui-input-block userNickname_info1 info"></div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">付款ID</label>
            <div class="layui-input-block userPayId_info1 info"></div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">预留手机</label>
            <div class="layui-input-block userPhone_info1 info"></div>
        </div>
        <div class="layui-form-item">
            <div class="layui-inline">
              <label class="layui-form-label">创建时间</label>
              <div class="layui-input-inline userRegisterDate_info1 info"></div>
            </div>
        </div>
        <div class="layui-form-item">
            <div class="layui-inline">
              <label class="layui-form-label">用户权限</label>
              <div class="layui-input-inline userRole_info1 info"></div>
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">用户状态</label>
            <div class="layui-input-block userStatus_info1 info"></div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">更新时间</label>
            <div class="layui-input-block userUpdateDate_info1 info"></div>
        </div>
    </div>

    <div id="userdistributed" style="display: none;">
        <table id="demo1" lay-filter="machinetest"></table>
    </div>
    <div id="queryBindingMachine" style="display: none;">
        <table id="demo2" lay-filter="machinetest2"></table>
    </div>


    <script type="text/html" id="barDemo">
        <i class="layui-icon layui-icon-tabs" lay-event="userDetails_1" title="用户详情"></i>
        <i class="layui-icon layui-icon-align-center" lay-event="queryBindingMachine_1" title="名下机器"></i>
        <i class="layui-icon layui-icon-transfer" lay-event="userdistributed_1" title="分配机器"></i>
    </script>

    <script type="text/html" id="barDemo1">
        <i class="layui-icon layui-icon-ok" lay-event="add_btn" title="分配"></i>
    </script>
    <script type="text/html" id="barDemo2">
        <i class="layui-icon layui-icon-close" lay-event="del_btn" title="解除"></i>
    </script>

    <script type="text/html" id="toolbarDemo">
        
        <div class="layui-inline">
            <div class="layui-input-inline" style="width: 280px;">
              <input type="text" name="name_2" id="name_2" placeholder="输入账号" autocomplete="off" class="layui-input">
            </div>
        </div>
        <div class="layui-inline">
            <div class="layui-input-inline" style="width: 150px;">
              <input type="text" name="nickname_2" id="nickname_2" placeholder="输入用户名" autocomplete="off" class="layui-input">
            </div>
        </div>
        <div class="layui-inline">
            <div class="layui-input-inline" style="width: 150px;">
              <input type="text" name="phone_2" id="phone_2" placeholder="输入手机号" autocomplete="off" class="layui-input">
            </div>
        </div>
        
        
        <div class="layui-inline">
            <div class="layui-input-inline" style="width: 120px;">
                <input type="text" name="start_2" id="start_2" placeholder="起始时间" autocomplete="off" class="layui-input">
            </div>
        </div>
        -
        <div class="layui-inline">
            <div class="layui-input-inline" style="width: 120px;">
                <input type="text" name="end_2" id="end_2" placeholder="结束时间" autocomplete="off" class="layui-input">
            </div>
        </div>
            <div class="layui-inline">
                <i class="layui-icon layui-icon-search" lay-event="getUserListSearch_2" title="搜索刷新"></i>
            </div>  
    </script>
<!-- 结束 -->

    <script src="/static/lib/layui-v2.5.6/layui-v2.5.6/layui/layui.js"></script>
    <script>
        
        layui.use(['table','laydate','form','util','layer'], function(){
            var $ = layui.jquery;
            var table = layui.table;
            var laydate =layui.laydate;
            var util = layui.util;
            var layer = layui.layer;

            table.render({
                elem: '#demo',
                height: 'full-60',
                method: 'post',
                                //TODO:
                url: '/admin/user/queryUser', //数据接口
                where: {
                    role: 'supplier'
                },
                toolbar: '#toolbarDemo',
                defaultToolbar: [],
                id: 'crmTest',
                cols: [[ //表头
                {type:'numbers'},
                {field: 'id', title: '用户ID', width:'20%'},
                {field: 'nickname', title: '用户名称'} ,
                {field: 'registerDate', title: '创建时间', templet:"<div>{{layui.util.toDateString(Number(d.registerDate), 'yyyy.MM.dd HH:mm:ss')}}</div>", width:'15%', sort: true},
                {field: 'phone', title: '手机号', templet:'<div>{{phonefun(d.phone)}}</div>', width: '15%'},
                {field: 'status', title: '用户状态', width: '7%'},
                {field: 'role', title: '用户权限', width: '10%', templet:'<div>{{rolefun(d.role)}}</div>'},
                {fixed: 'right', title: '操作', width:'10%', align:'center', toolbar: '#barDemo'}
                ]],


                parseData: function(res){ //res 即为原始返回的数据
                    return {
                    "code": res.success, //解析接口状态
                    "msg": res.message, //解析提示文本
                    // "count": res.data.total, //解析数据长度
                    "data": res.data //解析数据列表
                    };
                },
                request: {
                    pageName: 'page', //页码的参数名称，默认：page
                },
                response: {
                    statusCode: true //规定成功的状态码，默认：0
                }
            });
            laydate.render({
                elem: '#start_2',
                format: 'yyyy/MM/dd',
            });
            laydate.render({
                elem: '#end_2',
                format: 'yyyy/MM/dd'
            });
        
            table.on('toolbar(test)', function(obj){
                sessionStorage.setItem("crmName_2_2", $("#name_2").val());
                sessionStorage.setItem("crmNickname_2_2", $("#nickname_2").val());
                sessionStorage.setItem("crmPhone_2_2", $("#phone_2").val());
                sessionStorage.setItem("crmStart_2_2", $("#start_2").val());
                sessionStorage.setItem("crmEnd_2_2", $("#end_2").val());
                //搜索栏的实现
                var checkStatus = table.checkStatus(obj.config.id);
                switch(obj.event){
                    case 'getUserListSearch_2':
                    
                    
                    table.reload('crmTest', {
                        where: { //设定异步数据接口的额外参数，任意设
                            role: 'supplier',
                            nickname: $("#nickname_2").val() || undefined,
                            phone:$("#phone_2").val() || undefined,
                            name: $("#name_2").val() || undefined,
                            registerStartDate: dateTime($("#start_2").val()) || undefined,
                            registerEndDate: dateTime($("#end_2").val()) || undefined,
                        },
                        done: function(res, curr, count){
                            this.where={};
                        }
                    });
                    
                    laydate.render({
                        elem: '#start_2',
                        format: 'yyyy/MM/dd',
                    });
                    laydate.render({
                        elem: '#end_2',
                        format: 'yyyy/MM/dd'
                    });

                    if (sessionStorage.getItem("crmName_2_2") == '') {
                        $("#name_2").attr('placeholder','输入账号')
                    }else{
                        $("#name_2").attr('placeholder',sessionStorage.getItem("crmName_2_2"))
                    }

                    if (sessionStorage.getItem("crmNickname_2_2") == '') {
                        $("#nickname_2").attr('placeholder','输入用户名')
                    }else{
                        $("#nickname_2").attr('placeholder',sessionStorage.getItem("crmNickname_2_2"))
                    }

                    if (sessionStorage.getItem("crmPhone_2_2") == '') {
                        $("#phone_2").attr('placeholder','输入手机号')
                    }else{
                        $("#phone_2").attr('placeholder',sessionStorage.getItem("crmPhone_2_2"))
                    }
                    
                    if (sessionStorage.getItem("crmStart_2_2") == '') {
                        $("#start_2").attr('placeholder','起始时间')
                    }else{
                        $("#start_2").attr('value',sessionStorage.getItem("crmStart_2_2"))
                    }
                    if (sessionStorage.getItem("crmEnd_2_2") == '') {
                        $("#end_2").attr('placeholder','结束时间')
                    }else{
                        $("#end_2").attr('value',sessionStorage.getItem("crmEnd_2_2"))
                    }
                    break;
                };
            });

            table.on('tool(test)', function(obj){ //注：tool 是工具条事件名，test 是 table 原始容器的属性 lay-filter="对应的值"
                var data = obj.data; //获得当前行数据
                var layEvent = obj.event; //获得 lay-event 对应的值（也可以是表头的 event 参数对应的值）
                var tr = obj.tr; //获得当前行 tr 的 DOM 对象（如果有的话）
                if(layEvent === 'userDetails_1'){
                    $(".userId_info1").html(data.id)
                    $(".userName_info1").html(data.name)
                    $(".userNickname_info1").html(data.nickname)
                    $(".userPayId_info1").html(data.payId)
                    $(".userPhone_info1").html(data.phone)
                    $(".userRegisterDate_info1").html(ctime(data.registerDate))
                    $(".userRole_info1").html(rolefun(data.role))
                    $(".userStatus_info1").html(data.status)
                    $(".userUpdateDate_info1").html(data.updateDate)
                    layer.open({
                        type: 1,
                        skin: 'layui-layer-rim', //加上边框
                        area: ['66%', '90%'], //宽高
                        title: '用户详细',
                        btn: ['关闭'],
                        content: $('#userDetails'),
                        
                    });
                }else if (layEvent === 'queryBindingMachine_1') {
                    //名下机器列表
                    table.render({
                        elem: '#demo2',
                        height: 'full-200',
                        method: 'post',
                                        //TODO:
                        url: '/admin/user/queryBindingMachine', //数据接口
                        where: {
                            supplier_id: data.id
                        },
                        toolbar: '',
                        defaultToolbar: [],
                        id: 'machinetest2',
                        cols: [[ //表头
                        {field: 'machine_id', title: '机器ID', width:'10%', fixed: 'left'},
                        {field: 'place', templet:'<div>{{ d.machine.place }}</div>', title: '机器位置'} ,
                        {field: 'machineStatus', title: '机器状态', templet:'<div>{{ machineStatus(d.machine.machineStatus) }}</div>', width:'10%', sort: true},
                        {field: 'stock', title: '库存状态', templet:'<div>{{stockStatus(d.machine.stock)}}</div>', width: '15%'},
                        {field: 'capacity', title: '剩余空位', templet:'<div>{{ capacityfun(d.machine.capacity) }}</div>', width: '10%'},
                        {field: 'type', title: '收货点类型', width: '10%', templet:'<div>{{typefun(d.machine.type)}}</div>'},
                        {fixed: 'right', title: '解绑', width:'10%', align:'center', toolbar: '#barDemo2'}
                        ]],

                        parseData: function(res){ //res 即为原始返回的数据
                            return {
                            "code": res.success, //解析接口状态
                            "msg": res.message, //解析提示文本
                            "data": res.data //解析数据列表
                            };
                        },
                        request: {
                            pageName: 'pageNum', //页码的参数名称，默认：page
                            limitName: 'pageSize' //每页数据量的参数名，默认：limit
                        },
                        response: {
                            statusCode: true //规定成功的状态码，默认：0
                        }
                    });

                    table.on('tool(machinetest2)', function(obj1){ //注：tool 是工具条事件名，test 是 table 原始容器的属性 lay-filter="对应的值"
                        var data1 = obj1.data; //获得当前行数据
                        var layEvent1 = obj1.event;
                        if(layEvent1 === 'del_btn'){
                            layer.confirm('机器解除供应商？', function(index2){
                                $.ajax({
                                    type: "post",
                                            //TODO:
                                    url: "/admin/user/takeBackMachine",
                                    data: {relationship_id: data1.id},
                                    dataType: "json",
                                    success: function(mag){
                                        if (mag.success == true) {
                                            layer.msg(mag.message)
                                            table.reload('machinetest2')
                                        }else{
                                            layer.msg(mag.message)
                                        }
                                    },
                                    error:function(){
                                        layer.msg('操作失败,请重新登录操作')
                                    }
                                })
                            })
                        }
                    })

                    layer.open({
                        type: 1,
                        area: ['66%', '90%'], //宽高
                        title: '机器列表',
                        btn: ['取消'],
                        content: $('#queryBindingMachine'),
                    });
                    
                }else if (layEvent === 'userdistributed_1') {
                      //添加
                    table.render({
                        elem: '#demo1',
                        height: 'full-200',
                        method: 'get',
                                        //TODO:
                        url: '/admin/machine/queryUnboundMachine', //数据接口
                        where: {
                            supplier_id: data.id
                        },
                        toolbar: '',
                        defaultToolbar: [],
                        id: 'machinetest',
                        cols: [[ //表头
                        {field: 'id', title: '机器ID', width:'10%', fixed: 'left'},
                        {field: 'place', title: '机器位置'} ,
                        {field: 'machineStatus', title: '机器状态', templet:'<div>{{machineStatus(d.machineStatus)}}</div>', width:'10%', sort: true},
                        {field: 'stock', title: '库存状态', templet:'<div>{{stockStatus(d.stock)}}</div>', width: '15%'},
                        {field: 'capacity', title: '剩余空位', width: '10%'},
                        {field: 'type', title: '收货点类型', width: '10%', templet:'<div>{{typefun(d.type)}}</div>'},
                        {fixed: 'right', title: '绑定', width:'10%', align:'center', toolbar: '#barDemo1'}
                        ]],


                        parseData: function(res){ //res 即为原始返回的数据
                            return {
                            "code": res.success, //解析接口状态
                            "msg": res.message, //解析提示文本
                            "data": res.data //解析数据列表
                            };
                        },
                        request: {
                            pageName: 'pageNum', //页码的参数名称，默认：page
                            limitName: 'pageSize' //每页数据量的参数名，默认：limit
                        },
                        response: {
                            statusCode: true //规定成功的状态码，默认：0
                        }
                    });

                    table.on('tool(machinetest)', function(obj1){ //注：tool 是工具条事件名，test 是 table 原始容器的属性 lay-filter="对应的值"
                        var data1 = obj1.data; //获得当前行数据
                        var layEvent1 = obj1.event;
                        if(layEvent1 === 'add_btn'){
                            layer.confirm('机器分配到供应商？', function(index2){
                                $.ajax({
                                    type: "post",
                                            //TODO:
                                    url: "/admin/user/distributeMachine",
                                    data: {supplier_id: data.id,machine_id: data1.id},
                                    dataType: "json",
                                    success: function(mag){
                                        if (mag.success == true) {
                                            layer.msg(mag.message)
                                            table.reload('machinetest')
                                        }else{
                                            layer.msg(mag.message)
                                        }
                                    },
                                    error:function(){
                                        layer.msg('操作失败,请重新登录操作')
                                    }
                                })
                            })
                        }
                    })

                    layer.open({
                        type: 1,
                        area: ['66%', '90%'], //宽高
                        title: '机器列表',
                        btn: ['关闭'],
                        content: $('#userdistributed'),
                    });
                
                }
            });
        });

        function dateTime(date) {
            if (date != '') {
                var dateTime = new Date(date).getTime()
            }else{
                var dateTime = ''
            }
            return dateTime
        }
        function ctime(num) {
            if (num == null) {
                var ctime = '订单未完成'
            }else {
                var ctime = layui.util.toDateString(Number(num), "yyyy.MM.dd HH:mm:ss")
            }
            return ctime
        }
        function phonefun(num) {
            if(num == null || num == undefined ||num == '') {
                var phone = '<span style="color:#f173e1;">未填写手机号</span>'
            }else {
                var phone = num
            }
            return phone
        }
        function rolefun(num) {
            if (num == 'user') {
                var role = '普通用户'
            }else if (num == 'admin') {
                var role = '<span style="color:#f173e1;">管理员</span>'
            }else if (num == 'supplier') {
                var role = '<span style="color:#f173e1;">合作供应商</span>'
            }else{
                var role = '权限状态未知'
            }
            return role
        }
        function paymethodfun(num) {
            if (num == '0') {
                var paymethod = '支付宝'
            }else if (num == '1'){
                var paymethod = '微信'
            }else if (num == '2'){
                var paymethod = '账户余额'
            }else if (num == null){
                var paymethod = '订单未完成'
            }else {
                var paymethod = '其他支付方式'
            }
            return paymethod
        }
        function stockStatus(num) {
            if (num == 0) {
                var stockStatus = '正常'
            }else {
                var stockStatus = '<span style="color:#f173e1;">缺货</span>'
            }
            return stockStatus
        }
        function machineStatus(num) {
            if (num == 0) {
                var machineStatus = '正常'
            }else {
                var machineStatus = '<span style="color:#f173e1;">未上架</span>'
            }
            return machineStatus
        }
        function capacityfun(num) {
            if (num == null || num == undefined) {
                var capacity = ''
            }else{
                var capacity = num
            }
            return capacity;
        }
        function typefun(num) {
            if (num == 0) {
                var type = '售货机'
            }else {
                var type = '代收门店'
            }
            return type
        }
    </script>
</body>
</html>